<template>
  <n-flex>
    <div class="m-2">组织架构</div>
  </n-flex>
  <n-space vertical>
    <n-flex align="center">
      <n-input
        id="search"
        v-model:value="pattern"
        @update:value="handleSearchInputChange"
        class="rounded-6px w-full relative text-12px border-bottom mx-auto"
        style="background: var(--search-bg-color); width: 95%;"
        :maxlength="20"
        clearable
        autoComplete="off"
        autoCorrect="off"
        size="small"
        placeholder="搜索">
        <template #prefix>
          <svg class="w-12px h-12px"><use href="#search"></use></svg>
        </template>
      </n-input>
    </n-flex>

    <n-tree
      ref="treeInstRef"
      block-line
      :data="pattern ? searchData : allOrganizationUsers"
      :default-expand-all="isSearchData"
      virtual-scroll
      expand-on-click
      :node-props="nodeProp"
      style="max-height: calc(100vh - 150px); font-size: 14px" />
  </n-space>
</template>
<script setup lang="ts" name="companyList">
import { useMitt } from '@/hooks/useMitt.ts'
import { MittEnum } from '@/enums'
import { TreeOption } from 'naive-ui'
import { useMiaoxinCompanyStore } from '@/stores/miaoxinCompanyStore.ts'

const miaoxinCompanyStore = useMiaoxinCompanyStore()
const pattern = ref('')
const allOrganizationUsers = computed(() => miaoxinCompanyStore.companyList)
const searchData = ref<any[]>([])

/** 建议把此状态存入localStorage中 */
const detailsShow = ref(false)
const shrinkStatus = ref(false)

const isSearchData = computed(() => searchData.value?.length > 0)

/** 监听独立窗口关闭事件 */
watchEffect(() => {
  useMitt.on(MittEnum.SHRINK_WINDOW, async (event) => {
    shrinkStatus.value = event as boolean
  })
})

const nodeProp = ({ option }: { option: TreeOption }) => {
  return {
    style: { padding: '5px 0' },
    onClick() {
      if (option.level === 'company' && !isSearchData.value) {
        miaoxinCompanyStore.getUserByOrganization(option.CompanyId as string)
      }

      // 查看详情
      if (option.level === 'user') {
        detailsShow.value = true
        const data = {
          context: {
            type: 'company',
            uid: option.UserId,
            data: option
          },
          detailsShow: detailsShow.value
        }
        useMitt.emit(MittEnum.DETAILS_SHOW, data)
      }
    }
  }
}

// 处理搜索输入变化
const handleSearchInputChange = async (value: string) => {
  // 如果处于搜索详情页面，将输入值发送到SearchDetails组件
  searchData.value = (await miaoxinCompanyStore.getUserPage(value)) as any[]
}

onUnmounted(() => {
  detailsShow.value = false
  useMitt.emit(MittEnum.DETAILS_SHOW, detailsShow.value)
})
</script>

<style scoped lang="scss">
.item-box {
  color: var(--text-color);
  .text {
    color: #808080;
  }
  &:not(.active):hover {
    background: var(--bg-msg-hover);
    border-radius: 12px;
    cursor: pointer;
  }
}

.active {
  background: var(--msg-active-color);
  border-radius: 12px;
  color: #fff;
  .text {
    color: #fff;
  }
}

:deep(.n-collapse .n-collapse-item:not(:first-child)) {
  border: none;
}
:deep(.n-collapse .n-collapse-item) {
  margin: 6px 0 0;
}
</style>
